<script>
    loadcss('css/dialog.css')
</script>

<style>

    #dialog-main {
        z-index: 10002;
        left: 50%;
        top: 30%;
        width: 0;
        height: 0;
        display: none;
    }


</style>

<!--遮蔽浮层-->
<div class="pop-mask dialog-all" style="z-index: 10002  ">
</div>

<!--弹窗-->
<div class="dialog-main dialog-all" id="dialog-main">
    <div class="dialog-bg">
        <div class="tang-title tang-title-dragable">

            <!--关闭按钮-->
            <div class="buttons">
                <a class="close-btn"></a>
            </div>

            <div class="tang-body">

                <!--这是内容面板-->
                <div id="dialog-content-pane" class="clearfix tang-pass-qrcode tang-pass-body">

                    <!--这是动态变化的部分-->
                    <div id="dialog_dynamic_panel" class="tang-pass-qrcode-content">
                    </div>

                    <!--仅仅用来展示一条消息-->
                    <div id="dialog_message_panel" style="display: none" class="tang-pass-qrcode-content">

                        <h5 id="dialog_message_panel_container" style="margin: 20px"></h5>

                    </div>

                </div>

            </div>
        </div>
    </div>

</div>


<script>


    let dialog_layer = $(".dialog-all");

    //关闭按钮
    $(".close-btn").click(function () {

        //点击右上角的关闭按钮的时候
        Event.fanout('dialog_close', {flag: contentFlag});

        close_dialog();
    });


    let dialog_num = 0;


    function close_dialog() {

        dialog_num--;

        //直到关闭所有的弹窗层
        if (dialog_num === 0) {
            dialog_layer.hide();
            unbokehmain();
            mydialog.isShow = false;
            $('div.main_bts').show();
        }
    }

    function open_dialog() {

        //打开一层弹窗
        dialog_num++;

        //虚化背景
        bokehmain();
        dialog_layer.show();
        mydialog.isShow = true;
        $('div.main_bts').hide();

    }

    //内容标记.
    let contentFlag;

    let contents = {};

    let dynamic = $('#dialog_dynamic_panel');

    let cpage = '#dialog_dynamic_panel';



    //定义一个dialog对象
    var mydialog = {
        isShow: false,
        close: close_dialog,
        display: function (path, flag) {

            //首先打开页面
            open_dialog();

            contentFlag = flag;

            let cp = path.replace(/\/|\./g, '_');
            let id = '#dialog-content-pane_' + cp;

            //如果已加载压面里面含有以path为id的内容,那么直接显示
            if (contents[id]) {

                if (cpage !== id) {
                    $(cpage).hide();
                    $(id).show();
                    cpage = id;
                }

            } else {
                //插入一个框
                dynamic.before($("<div>")
                    .attr({
                        id: 'dialog-content-pane_' + cp,
                        class: 'tang-pass-qrcode-content',
                    }));

                $(cpage).hide();

                //加载内容
                loadpage(id, path);
                //添加标记位
                contents[id] = true;

                cpage = id;
            }



        },
        dynamic: function (path, flag) {


            open_dialog();

            contentFlag = flag;

            if (cpage !== '#dialog_dynamic_panel') {
                $(cpage).hide();
                cpage = '#dialog_dynamic_panel';
                //展示当前页面
                $(cpage).show();
            }


            //加载动态页面
            loadpage(cpage, path);

        }

    };

</script>